<template>
  <div class="case-num">
    <checked-title>
      <template #title>
        <div class="title">
          <span></span>
          本月案件数量（{{ title }}）
          <span></span>
          <!-- <div class="icon" @click="tabsClick">
            <img class="img" src="@/assets/images/shouyetab.png" alt="">
          </div>-->
        </div>
      </template>
    </checked-title>
    <div
      id="echarts"
      ref="echarts"
      style="width:100%;height:200px;"
    ></div>
  </div>
</template>

<script>
import Highcharts, { format, map } from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
import { HomeDb } from '@/api'
highcharts3d(Highcharts)
export default {
  data() {
    return {
      title: '街乡',
      wgData: {
        xData: [],
        yData: []
      },
      streetData: [],
      type: 1
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // 本月案件数量
      HomeDb.getHomeStreetOrder({ type: this.type }).then(res => {
        this.streetData = []
        res.data.forEach(v => {
          if (v.num != 0) {
            this.streetData.push({
              name: v.street,
              value: v.slNum
            })
          }
        })
        this.incidentfun()
      })
    },
    tabsClick() {
      this.title = this.type == 2 ? '街办' : '部门'
      this.type = this.type == 2 ? 1 : 2
      this.getData()
    },
    incidentfun() {
      this.wgData.xData = []
      this.wgData.yData = []
      for (var i = 0; i < this.streetData.length; i++) {
        this.wgData.xData.push(this.streetData[i].name)
        this.wgData.yData.push(this.streetData[i].value)
      }
      this.echarts()
    },
    echarts() {
      var myChart5 = echarts.init(this.$refs.echarts)
      // 绘制左侧面
      const wid = 20
      const w1 = Math.sin(Math.PI / 6) * wid //4
      const w2 = Math.sin(Math.PI / 3) * wid // 6.8
      const snapHeight = wid / 2
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x - w2, shape.y]
          const c2 = [shape.x - w2, xAxisPoint[1]]
          const c3 = [shape.x, xAxisPoint[1]]
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath()
        }
      })
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x, xAxisPoint[1]]
          const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight]
          const c4 = [shape.x + w1, shape.y - w2 + snapHeight]
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath()
        }
      })
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + w1, shape.y - w2 + snapHeight] //右点
          const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight]
          const c4 = [shape.x - w2, shape.y]
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath()
        }
      })
      // 三个面图形
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)
      var option5 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(31, 73, 135, 0.5)',
          formatter: '{b}<br/>{a}: {c}件'
        },
        grid: {
          top: '7%',
          left: '7%',
          bottom: '0%',
          right: '0',
          containLabel: true
        },
        dataZoom: {
          show: false,
          startValue: 0,
          endValue: 5
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 12,
            color: '#E5E5E5',
            rotate: 20
          },
          splitLine: {
            show: false
          },
          data: this.wgData.xData
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(13, 151, 235, 0.1)',
              width: 1
            }
          }
        },
        series: [
          {
            name: '案件数量',
            type: 'custom',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)])
              location[0] = location[0] + wid * 0
              const xlocation = api.coord([api.value(0), 0])
              xlocation[0] = xlocation[0] + wid * 0
              const color = params.dataIndex % 2 === 0 ? '#FDEF06' : '#21D3FF'
              const shape = [
                {
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: xlocation
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: color
                      },
                      {
                        offset: 1,
                        color: color
                      }
                    ])
                  }
                },
                {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: xlocation
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: color
                      },
                      {
                        offset: 1,
                        color: color
                      }
                    ])
                  }
                },
                {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: xlocation
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: color
                      },
                      {
                        offset: 1,
                        color: color
                      }
                    ])
                  }
                }
              ]
              return {
                type: 'group',
                children: [...shape]
              }
            },
            data: this.wgData.yData
          },
          {
            z: 1,
            name: '蓝色',
            type: 'bar',
            barWidth: 30,
            barGap: '50%',
            data: this.streetData,
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0)',
                //柱形图上方标题
                label: {
                  show: true,
                  padding:2,
                  position: 'top',
                  textStyle: {
                    color: '#ffffff',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      }

      var startNumber = 0
      // 有多少条数据
      var xAxisDatalen = this.wgData.xData.length
      if (xAxisDatalen > 6) {
        // len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动
        var len = 5 //街乡数量12，显示一屏
        this.timer && clearInterval(this.timer)
        this.timer = setInterval(function () {
          if (startNumber === xAxisDatalen - len) {
            startNumber = 0
          }
          myChart5.dispatchAction({
            type: 'dataZoom',
            startValue: startNumber,
            endValue: startNumber + len
          })
          startNumber++
        }, 2000)
      }
      myChart5.setOption(option5)
    }
  }
}
</script>

<style lang="less" scoped>
.case-num {
  width: 100%;
  margin-top: 20px;
  padding: 0 10px;
  .title {
    display: flex;
    justify-content: space-between;
    align-content: center;
    .icon {
      transform: rotate(180deg);
      color: #00fbf0;
      cursor: pointer;
      margin-bottom: 10px;
      width: 18px;
      height: auto;
      img {
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
